{extend name="base" /}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/plugins/layui/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="__PUBLIC__/plugins/layui/layui_ext/dtree/font/dtreefont.css">
<style>
  .choice-user-dvi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
  }

  .choice-user-dvi:hover {
    cursor: pointer;
    background: #eee;
  }

  .choice-user-dvi-img {
    width: 30px;
    height: 30px;
  }

  .choice-user-dvi-text {
    display: flex;
    align-items: center;
    font-size: 14px;
  }

  .no-choice-user {
    text-align: center;
    color: #999;
  }
</style>
{/block}
{block name="body"}
<div class="admin-main layui-form layui-field-box">
  <div class="layui-form-item">
    <label class="layui-form-label" style="width: auto;padding: 9px 0px">搜索:</label>
    <div class="layui-input-block" style="margin-left: 70px">
      <div class="tags" id="tags" style="width: 80%;margin: 0px;padding: 0px 10px;">
        <input type="text" name="nickname" id="inputTags" placeholder="请输入用户名" autocomplete="off" />
        <input type="hidden" name="tags-content" value="" />
      </div>
    </div>
  </div>
  <div class="layui-tab layui-tab-card" lay-filter="choicecard">
    <ul class="layui-tab-title">
      {switch $scene}
      {case all}
      <li class="layui-this">组织</li>
      <li>人员</li>
      {/case}
      {case group}
      <li class="layui-this">组织</li>
      {/case}
      {case user}
      <li class="layui-this">人员</li>
      {/case}
      {/switch}
    </ul>
    <div class="layui-tab-content" style="min-height: 100px;">
      {switch $scene}
      {case all}
      <div class="layui-tab-item layui-show">
        <ul id="demoTree" data-id="0"></ul>
      </div>
      <div class="layui-tab-item">
        <div style="display: flex;flex-direction: row;">
          <ul id="userDepTree" style="width:70%;" data-id="0"></ul>
          <div id="personnel" style="width: 200px;border-left: 1px solid #eee;">
            <div class="no-choice-user">点击左侧组织获取人员列表</div>
          </div>
        </div>
      </div>
      {/case}
      {case group}
      <div class="layui-tab-item layui-show">
        <ul id="demoTree" data-id="0"></ul>
      </div>
      {/case}
      {case user}
      <div class="layui-tab-item layui-show">
        <div style="display: flex;flex-direction: row;">
          <ul id="userDepTree" style="width:70%;" data-id="0"></ul>
          <div id="personnel" style="width: 200px;border-left: 1px solid #eee;">
            <div class="no-choice-user">点击左侧组织获取人员列表</div>
          </div>
        </div>
      </div>
      {/case}
      {/switch}
    </div>
  </div>
</div>

{/block}
{block name="js"}
<script>
  var selected_appoint_user = []
          ,selected_appoint_group = []
          ,tags = [];
  var TagsObj = {};

  function get_selected_data () {
    let data = {};
    data.user = selected_appoint_user ;
    data.group = selected_appoint_group ;
    data.tags = tags ;
    return data;
  }

  function del_selected_data (param) {
    let exist_group = selected_appoint_group.indexOf(param);
    if (exist_group > -1) {
      selected_appoint_group.splice(exist_group, 1);
    }
    let exist_user = selected_appoint_user.indexOf(param);
    if (exist_user > -1) {
      selected_appoint_user.splice(exist_user, 1);
    }
    let exist_tags = tags.indexOf(param);
    if (exist_tags > -1) {
      tags.splice(exist_tags, 1);
    }
  }

  layui.extend({
    inputTags: '/plugins/layui/inputTags/inputTags',
    yutons_sug: '/plugins/layui/yutons-mods/yutons_sug',
    dtree: '/plugins/layui/layui_ext/dtree/dtree',
  }).use(['element', 'inputTags', 'dtree', 'yutons_sug'], function(){
    var element = layui.element
            , form = layui.form
            , layer = layui.layer
            , jq = layui.jquery
            , inputTags = layui.inputTags
            , dtree = layui.dtree
            , yutons_sug = layui.yutons_sug;

    var $node = '';
    var checkbarFun = {
      chooseBefore: function($i, node) { //复选框点击前的回调。
        // console.log(node);
        $node = node;
        return true;
      }
    };

    yutons_sug.render({
      id: "inputTags",
      height: "167",
      cols: [
        [{
          field: 'nickname',
          title: '用户名'
        }, {
          field: 'mobile',
          title: '手机号'
        }, {
          field: 'dep_name',
          title: '部门'
        }]
      ],
      field: 'nickname',
      type: 'sugTable', //设置输入框提示类型：sug-下拉框，sugTable-下拉表格
      url: "{:url('user/getLikeUserList')}" + "?keyword=",
      remove: function (res) {
        selected_appoint_user[res.id] =  res.nickname;
        tags.push(res.nickname);
      }
    });

    let dataUrl = "{:url('user/departmentDtree', array('disToSub'=>$disToSub))}";
    console.log('dataUrl: ', dataUrl);
    if ("{$scene}" == 'group' || "{$scene}" == 'all') {
      var DemoTree = dtree.render({
        elem: "#demoTree",
        url: dataUrl,
        type: "all",
        dot: false,
        checkbar: true,
        // checkbarType: "self",
        checkbarType: "no-all",
        checkbarData: 'all',
        checkbarFun: checkbarFun,
        response: {
          parentId: 'parent_id'
        }
      });
    }

    let dataUrl2 = "{:url('user/departmentDtree')}";
    if ("{$scene}" == 'user' || "{$scene}" == 'all') {
      var userDepTree = dtree.render({
        elem: "#userDepTree",
        url: dataUrl2,
        type: "all",
        dot: false,
      });
    }

//		dtree.on("chooseDone('demoTree')", function (obj) {
//			console.log('chooseDone');
//			for (let i in obj.checkbarParams) {
//				let val = obj.checkbarParams[i];
//				if (val.ischecked != 1) {
//					TagsObj.removeTag(val.context);
//					let tagsIndex = tags.indexOf(val.nickname);
//					if (tagsIndex > -1) {
//						tags.splice(tagsIndex, 1);
//					}
//					if(selected_appoint_group[val.nodeId]){
//                        selected_appoint_group.splice(val.nodeId, 1);
//					}
//				} else {
//					TagsObj.addTag(val.context);
//					tags.push(val.context);
//					selected_appoint_group[val.nodeId] = val.context;
//				}
//			}
    // var data = $node;
    // if (data.ischecked == 1) {
    // 	TagsObj.removeTag(data.context);
    // 	let tagsIndex = tags.indexOf(data.nickname);
    // 	if (tagsIndex > -1) {
    // 		tags.splice(tagsIndex, 1);
    // 	}
    // 	selected_appoint_group.splice(data.nodeId, 1);
    // } else {
    // 	TagsObj.addTag(data.context);
    // 	tags.push(data.context);
    // 	selected_appoint_group[data.nodeId] = data.context;
    // }
//		});

    dtree.on("chooseDone('demoTree')", function (obj) {
      console.log('chooseDone194');
      console.log('obj.checkbarParams', obj.checkbarParams);
      let arr = jq.extend(true, [], obj.checkbarParams);
      for (let i in obj.checkbarParams) {
        let val = obj.checkbarParams[i];
        //查是否有同名的
        for (let i2 in arr) {
          let v = arr[i2];
          if (val.context == v.context && val.nodeId != v.nodeId) {
            //有重名的 名字加上父级的名字
            val.context = getParentName(arr, val.parentId) + '+' + val.context
          }
        }
        console.log('val', val)
        if (val.checked != 1) {
          TagsObj.removeTag(val.context);
          let tagsIndex = tags.indexOf(val.context);
          console.log('tagsIndex', tagsIndex);
          if (tagsIndex > -1) {
            tags.splice(tagsIndex, 1);
            if (selected_appoint_group[val.nodeId]) {
              selected_appoint_group.splice(val.nodeId, 1);
            }
          }
        } else {
          console.log('val.checked == 1', val.context);
          let tagsIndex = tags.indexOf(val.context);
          console.log('tagsIndex', tagsIndex);
          if (tagsIndex == -1) {
            TagsObj.addTag(val.context);
            tags.push(val.context);
            selected_appoint_group[val.nodeId] = val.context;
          }
        }
      }
      console.log('tags', tags)
      console.log('selected_appoint_group', selected_appoint_group)
    });

    function getParentName(arr, pid) {
      if (pid > 0) {
        for (let i2 in arr) {
          let v = arr[i2];
          if (pid == v.nodeId) {
            return v.context.replace('(全选)', '');
          }
        }
      }
      return '顶级';
    }

    dtree.on("node('userDepTree')", function (param) {
      let data = {
        dep_id: param.param.nodeId
      }
      jq.post("{:url('user/choiceUser')}", data, function (res) {
        var $html = jq(res);
        if (selected_appoint_user.length > 0) {
          for (let i in selected_appoint_user) {
            let checked = $html.find('#selTotss'+i);
            if (checked.length == 1) {
              checked.attr('checked', true);
              checked.prop('checked', true);
            }
          }
        }
        jq('#personnel').html('');
        jq('#personnel').append($html.html());
      });
    });

    jq('#personnel').on('click','.choice-user-dvi' ,function (e) {
      let obj = jq(this).find('input[type=checkbox]');
      let status = obj[0].checked;
      if (status) {
        TagsObj.removeTag(this.dataset.nickname);
        let tagsIndex = tags.indexOf(this.dataset.nickname);
        if (tagsIndex > -1) {
          tags.splice(tagsIndex, 1);
        }
        selected_appoint_user.splice(this.dataset.id, 1);
      } else {
        if ('{$checkbar}' == false) {
          for (let i in tags) {
            TagsObj.removeTag(tags[i]);
          }
          tags = [];
          selected_appoint_user = [];
          jq('input[type=checkbox]').prop('checked', false);
        }
        TagsObj.addTag(this.dataset.nickname);
        tags.push(this.dataset.nickname);
        selected_appoint_user[''+this.dataset.id+''] = this.dataset.nickname;
        // map.set(this.dataset.id, );
      }
      console.log(selected_appoint_user);
      obj.attr('checked', !status);
      obj.prop('checked', !status);
    });

    TagsObj = inputTags.render({
      elem:'#inputTags',
      aldaBtn: true,
      count: 9999,
      showDeleted: false,
      done: function(value){
        //console.log(value);
      },
      remove: function (value) {
        del_selected_data(value);
      }
    });

  });
</script>
{/block}